<section class="ev-sm-container ev-view challenge-container noScroll">
  <!-- ongoing challenges -->
  <div *ngIf="routerPublic.url === allChallengesRoutePathCommon" [@.disabled]="true">
    <h4 class="fw-light">All challenges</h4>
    <mat-tab-group>
      <mat-tab label="Ongoing ({{ ongoingChallenges.length }})" id="ongoing-challenges">
        <ng-template matTabContent>
        <div *ngIf="ongoingChallenges.length === 0" class="none fw-light fs-16">No challenges found.</div>
        <div class="row pd-lr-20">
          <div class="col s12 m4 l3" *ngFor="let challenge of ongoingChallenges">
            <a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge.id]">
              <app-challengecard [challenge]="challenge"></app-challengecard>
            </a>
          </div>
        </div>
        </ng-template>
      </mat-tab>

      <mat-tab class="fs-16" label="Upcoming ({{ upcomingChallenges.length }})">
        <ng-template matTabContent>
        <!-- upcoming challenges -->
        <div *ngIf="upcomingChallenges.length === 0" class="none fw-light fs-16">No challenges found.</div>
        <div class="row pd-lr-20">
          <div class="col s12 m4 l3" *ngFor="let challenge of upcomingChallenges">
            <a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge.id]">
              <app-challengecard [challenge]="challenge"></app-challengecard>
            </a>
          </div>
        </div>
        </ng-template>
      </mat-tab>

      <mat-tab label="Past ({{ pastChallenges.length }})">
        <ng-template matTabContent>
        <!-- past challenges -->
        <div *ngIf="pastChallenges.length === 0" class="none fw-light fs-16">No challenges found.</div>
        <div class="row pd-lr-20">
          <div class="col s12 m4 l3" *ngFor="let challenge of pastChallenges">
            <a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge.id]">
              <app-challengecard [challenge]="challenge"></app-challengecard>
            </a>
          </div>
        </div>
        </ng-template>
      </mat-tab>
    </mat-tab-group>
  </div>
  <!-- my challenges  -->
  <div *ngIf="routerPublic.url === myChallengesRoutePathCommon" [@.disabled]="true">
    <h4 class="fw-light">Hosted challenges</h4>
    <mat-tab-group>
      <mat-tab label="Ongoing ({{ filteredOngoingChallenges.length }})">
        <ng-template matTabContent>
        <div *ngIf="!filteredOngoingChallenges.length">
          <p class="fw-light fs-16">
            You haven't hosted any challenge. Please
            <a [routerLink]="hostTeamsRoutePathCommon" class="highlight-link">click here</a> to get started.
          </p>
        </div>
        <div class="row pd-lr-20" *ngIf="filteredOngoingChallenges.length">
          <div class="col s12 m3" *ngFor="let challenge of filteredOngoingChallenges">
            <a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
              <app-challengecard [challenge]="challenge"></app-challengecard>
            </a>
          </div>
        </div>
        </ng-template>
      </mat-tab>
      <mat-tab label="Upcoming ({{ filteredUpcomingChallenges.length }})">
        <ng-template matTabContent>
        <div *ngIf="!filteredUpcomingChallenges.length">
          <p class="fw-light fs-16">
            No upcoming hosted challenges found. Please
            <a [routerLink]="hostTeamsRoutePathCommon" class="highlight-link">click here</a> to get started.
          </p>
        </div>
        <div class="row pd-lr-20" *ngIf="filteredUpcomingChallenges.length">
          <div class="col s12 m3" *ngFor="let challenge of filteredUpcomingChallenges">
            <a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
              <app-challengecard [challenge]="challenge"></app-challengecard>
            </a>
          </div>
        </div>
        </ng-template>
      </mat-tab>
      <mat-tab label="Past ({{ filteredPastChallenges.length }})">
        <ng-template matTabContent>
        <div *ngIf="!filteredPastChallenges.length">
          <p class="fw-light fs-16">No past hosted challenges found.</p>
        </div>
        <div class="row pd-lr-20" *ngIf="filteredPastChallenges.length">
          <div class="col s12 m3" *ngFor="let challenge of filteredPastChallenges">
            <a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
              <app-challengecard [challenge]="challenge"></app-challengecard>
            </a>
          </div>
        </div>
        </ng-template>
      </mat-tab>
      <!-- Unapproved challenges -->
      <mat-tab class="unapproved" label="Unapproved ({{ unapprovedChallengeList.length }})">
        <ng-template matTabContent>
        <div *ngIf="!unapprovedChallengeList.length">
          <p class="fw-light fs-16">No unapproved challenges found.</p>
        </div>
        <div class="row pd-lr-20" *ngIf="unapprovedChallengeList.length">
          <div class="col s12 m3" *ngFor="let challenge of unapprovedChallengeList">
            <a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
              <app-challengecard [challenge]="challenge"></app-challengecard>
            </a>
          </div>
        </div>
        </ng-template>
      </mat-tab>
    </mat-tab-group>
  </div>
  <!-- my participated challenges  -->
  <div *ngIf="routerPublic.url === myParticipatedChallengesRoutePathCommon" [@.disabled]="true">
    <h4 class="fw-light">Participated challenges</h4>
    <mat-tab-group>
      <mat-tab label="Ongoing ({{ filteredOngoingChallenges.length }})">
        <ng-template matTabContent>
        <div *ngIf="!filteredOngoingChallenges.length">
          <p class="fw-light fs-16">
            You haven't participated in any challenge. Please
            <a [routerLink]="allChallengesRoutePathCommon" class="highlight-link">click here</a> to get started.
          </p>
        </div>
        <div class="row pd-lr-20" *ngIf="filteredOngoingChallenges.length">
          <div class="col s12 m3" *ngFor="let challenge of filteredOngoingChallenges">
            <a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
              <app-challengecard [challenge]="challenge"></app-challengecard>
            </a>
          </div>
        </div>
        </ng-template>
      </mat-tab>
      <mat-tab label="Past ({{ filteredPastChallenges.length }})">
        <ng-template matTabContent>
        <div *ngIf="!filteredPastChallenges.length">
          <p class="fw-light fs-16">You haven't participated in any of the past challenges.</p>
        </div>
        <div class="row pd-lr-20" *ngIf="filteredPastChallenges.length">
          <div class="col s12 m3" *ngFor="let challenge of filteredPastChallenges">
            <a class="ev-card-hover" [routerLink]="[challengeRoutePathCommon, challenge['id']]">
              <app-challengecard [challenge]="challenge"></app-challengecard>
            </a>
          </div>
        </div>
        </ng-template>
      </mat-tab>
    </mat-tab-group>
  </div>
</section>
